<template>
    <div>
        <headNav title="小明"></headNav>
        <div class="neck-p">
            <div class="left">
                <div class="neck-text">班级圈</div>
                <img class="arr-img" src="@/assets/img/weLiao/arr.png" alt="" srcset="">
            </div>
            

            <div class="right">
                <img class="qun-img" src="@/assets/img/weLiao/qun-btn.png" alt="">
                <div class="neck-text">群成员</div>
            </div>
        </div>
        <div class="chat-list">
            <chatItem content='防守打法是的发送到防守打法水电费水电费水电费水电费' time='2020-18-79'></chatItem>
            <chatItem :isMe='true' content='sfsdfsdfdsfsdfsdfsdf' time='12:12'></chatItem>
           
            <chatItem 
                time='36:56'
                type='img'
                content="https://public-server-center-test-1258963190.cos.ap-guangzhou.myqcloud.com/face/2020/12/23/00518547875815631441608730574297.jpg"
             ></chatItem>

             <chatItem 
                :isMe="true"
                time='36:56'
                type='img'
                content="https://public-server-center-test-1258963190.cos.ap-guangzhou.myqcloud.com/face/2020/12/23/00518547875815631441608730574297.jpg"
             ></chatItem>

             <chatItem type='audio' content=''></chatItem>
             <chatItem type='audio' :isMe='true'></chatItem>

             <chatItem type='video' content='http://public-server-center-test-1258963190.cos.ap-guangzhou.myqcloud.com/study/2020/4/16/067903489315083081587009404279.MOV'></chatItem>
            
            <chatItem type='video' :isMe='true' content='http://public-server-center-test-1258963190.cos.ap-guangzhou.myqcloud.com/study/2020/4/16/067903489315083081587009404279.MOV'></chatItem>
            
        </div>
        <send></send>
    </div>
</template>
<script>
import headNav from '@/components/headNav/headNav'
import chatItem from './chatItem'
import send from './send'
export default {
    components: {
		headNav, chatItem, send
	},
}
</script>
<style scoped>
.neck-p{
    height: 0.76rem; position: relative; background: #128FEF; color: #fff;
}
.left{
    position: absolute; left: 0.24rem; top:0.2rem
}
.right{
    position: absolute; right: 0.24rem; top:0.2rem
}
.neck-text{
    display: inline-block; vertical-align: middle;
    font-size: 0.28rem;
}
.arr-img{
    display: inline-block; vertical-align: middle;
    width: 0.13rem; height: 0.2rem;
}
.qun-img{
    display: inline-block; vertical-align: middle;
    width: 0.38rem; height: 0.28rem;
}       
.chat-list{
    height: calc(100% - 2.6rem); overflow-y: scroll;
}
</style>
